import React from 'react';
import { observer } from 'mobx-react';
import BatchEditStore from '../../stores/list/BatchEditStore';
import { WeaDialog, WeaLocaleProvider, WeaTableEditable,WeaBrowser } from 'ecCom';
import { Button } from 'antd';
import { toJS } from 'mobx';
const getLabel = WeaLocaleProvider.getLabel;

export interface BatchmodifyfeildProps {
    batchEditStore: BatchEditStore;
    iconInfo?:any;
}
@observer
export default class Batchmodifyfeild extends React.Component<BatchmodifyfeildProps, any> {

    columns = [
        {
            title: getLabel(685, '字段名称', 'label'),
            dataIndex: 'fieldlabel',
            width: '40%',
            com: [
                { type: 'INPUT', key: 'fieldlabel', viewAttr: '1' }
            ],
        },
        {
            title: getLabel(125391, '字段对应值', 'label'),
            dataIndex: 'fieldvalue',
            width: '60%',
            com: [
                { type: 'input', key: 'fieldvalue', viewAttr: '1' }
            ],
        }
    ];

    getCells = (cells) => {
        const { batchEditStore } = this.props;
        //cells = toJS(cells);
        cells.map((cell)=>{
            if(cell.fieldvalue.com){
                let com = cell.fieldvalue.com[0];
                if(com.type == 'BROWSER' && com.browserConditionParam.type == '141'){
                    // 浏览框人力资源条件信息缺失,单独渲染
                    com.type = 'CUSTOM';
                    com.render = () =>{
                        const {changeRl} = batchEditStore 
                        return (
                            <WeaBrowser
                                {...com.browserConditionParam}
                                replaceDatas = {[]}
                                onChange={(ids,names,datas)=>{changeRl(datas,cell.fieldid)}}
                            />
                        )
                    }
                }
            }
        })
        return cells
    }
    getRowSelection = () => { return null }

    tableChange = (datas, other) => { 
        const { batchEditStore } = this.props;
        batchEditStore.datas = datas; 
    }

    render() {
        const { batchEditStore } = this.props;
        return (
            <div>
                <div style={{ color: 'red' }}>{getLabel(125493, '已经勾选{0}条数据进行修改', 'label').replace('{0}', batchEditStore.selectedRowKeys.length)}</div>
                <WeaTableEditable
                    rowKey="fieldid"
                    columns={this.columns}
                    initialDatas={toJS(batchEditStore.datas)}
                    datas={toJS(batchEditStore.datas)}
                    // cells={toJS(batchEditStore.cells)}
                    cells={this.getCells(toJS(batchEditStore.cells))}
                    getRowSelection={this.getRowSelection}
                    showAdd={false}
                    showDelete={false}
                    showCopy={false}
                    onChange={this.tableChange}
                />
            </div >
        )
    }
}

@observer
export class BatchmodifyfeildDialog extends React.Component<BatchmodifyfeildProps, any>{
    onClose=()=>{
        const { batchEditStore } = this.props;
        batchEditStore.visible = false
    }
    render() {
        const { batchEditStore ,iconInfo} = this.props;
        const buttons = [
            <Button onClick={this.onClose}>{getLabel(309, "关闭")}</Button>,
            <Button type="primary" loading={batchEditStore.loading} onClick={batchEditStore.saveBatctEdit}>{getLabel(86, '保存')}</Button>
        ]
        return (
            <WeaDialog
                className='wea-auth-modal cube-dialog'
                buttons={buttons}
                title={getLabel(25465, '批量修改', 'label') + getLabel(563, '数据', 'label')}
                iconBgcolor={iconInfo.iconBg || "#96358a"}
                icon={iconInfo.icon || 'icon-coms-ModelingEngine'}
                iconFontColor={iconInfo.iconColor || "#fff"}
                visible={batchEditStore.visible}
                style={{ width: 800, height: 500 }}
                hasScroll={true}
                onCancel={this.onClose}
            >
                <Batchmodifyfeild batchEditStore={batchEditStore} />
            </WeaDialog >
        )
    }
}